<template>
  <maincontainer>
    <mycard>
      <n-form
        ref='formRef'
        :label-width='80'
        label-placement='left'
        :model='formValue'
      >
        <n-grid x-gap='12' :cols='4'>
          <n-gi>
            <n-form-item label='部门名称:' path='name'>
              <n-input v-model:value='formValue.name' placeholder='输入部门名称' />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label='上级部门:' path='parent'>
              <n-cascader
                v-model:value='formValue.parent'
                placeholder='请选择上级部门'
                :options='parentoptions'
                remote
                :show-path='false'
                clearable
                value-field='id'
                label-field='name'
              />
            </n-form-item>
          </n-gi>
          <n-gi>

          </n-gi>
          <n-gi>
            <n-button @click='handleSearch'>查询</n-button>
            <n-button @click='handleResetForm'>重置</n-button>
            <n-button @click='handleCreate'>新建</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <mycard class='flex-1 h-full'>
      <flextable :column='column' :tabledata='tableData' :loading='loading'></flextable>
    </mycard>
    <mycard class='w-full h-8 juzhong1'>
      <fenye :total='total' @change='gettabledatafunc' ref='fenyeref' class='juzhong1'></fenye>
    </mycard>
    <Edit ref='editref' @close='refreshdelete' />
  </maincontainer>
</template>

<script setup name='testpapermanagement' lang='ts'>
import { useRoute } from 'vue-router'
import Edit from './modal.vue'
import { inject, ref } from 'vue'
import { useListIndex } from '../../../hooks/useEdit'
import { useColumns } from '../../../hooks/useColumns'

const route = useRoute()
const parentoptions = ref([]) // 上级部门列表

const {
  formRef, fenyeref, editref, formValue, tableData, total, handleSearch,
  handleResetForm, handleView, handleCreate, refreshdelete,
  http, message, loading,
} = useListIndex()
// 点击删除
let delDialog: Function = inject('delDialog')
const handleDelete = (data: any) => {
  delDialog(refreshdelete, http.testpaperdelete, data.id, data.name)
}
const handleEdit = (data: any) => {
  const newdata = { ...data }
  newdata.parent = data.parent ? data.parent.id : null
  editref.value.init('edit', newdata)
}

const { index, createdTime, changeTime, view, edit, del } = useColumns(handleView, handleEdit, handleDelete)
const column = ref([
  index,
  { title: '部门名称', key: 'name', show: true },
  {
    title: '上级部门', key: 'parent', show: true, render: (rowData: any) => {
      return rowData['parent'] ? rowData['parent'].name : ''
    },
  },
  { title: '备注', key: 'desc', show: true },
  createdTime,
  changeTime,
  view, edit, del,
])

// 向后台获取数据
const gettabledatafunc = () => {
  const config = { ...formValue.value }
  console.log(http,http.testpaperlist,"不是func吗")
  http.testpaperlist(config, loading).then((res: any) => {
    if (res.data.code === 0) {
      tableData.value = res.data.items
    } else {
      message.error(res.data.msg || '获取数据失败')
    }
  })
}


const zhucefunc: Function | undefined = inject('zhuceshuaxinfunc')
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({ page: 1 })
}

// 初始化区域
init()
zhucefunc && zhucefunc({ [route.name!.toString()]: init })
</script>


<style scoped>
</style>
